const layer = layui.layer
function fn() {
  axios.get('/my/article/cates').then(({ data: { data } }) => {
    let htmlStr = data.map(item => `
    <tr>
        <td>${item.name}</td>
        <td>${item.alias}</td>
        <td>
          <button data-id="${item.Id}" type="button" class="layui-btn layui-btn-xs btn_edit">编辑</button>
          <button data-id="${item.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete">删除</button>
        </td>
    </tr>
    `).join('')
    $('#tbody').html(htmlStr)
  })
}
fn()

let addFormStr = `
<form  id="addForm" class="layui-form">
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>
`
let indexAddForm
$('#btnAddCate').on('click', function () {
  indexAddForm = layer.open({
    content: addFormStr,
    title: '添加文章类别',
    type: 1,
    area: ['500px', '250px']
  });
})
let form = layui.form
$("body").on('submit', '#addForm', function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post('/my/article/addcates', data).then(({ data: { message, status } }) => {
    // console.log(data);
    if (status !== 0) {
      return layer.msg(message)
    }
    layer.msg(message)
    layer.close(indexAddForm)
    fn()
  })
})
let indexEditForm
let editFormStr = `
<form id="editForm" class="layui-form" lay-filter='editForm'>
<div class="layui-form-item layui-hide">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="Id" required lay-verify="required" placeholder="请输入id" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
          </div>
        </div>
      </form>
`

$('body').on('click', '.btn_edit', function () {
  const Id = $(this).attr('data-id')
  console.log(Id);
  axios.get('/my/article/cates/' + Id).then(({ data: res }) => {
    //给表单赋值
    form.val("editForm", res.data);
  })

  indexEditForm = layer.open({
    content: editFormStr,
    title: '修改文章类别',
    type: 1,
    area: ['500px', '250px']
  });
})

$('body').on('submit', '#editForm', function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  console.log(data);
  axios.post('/my/article/updatecate', data).then(({ data: { status, message } }) => {
    console.log(data);
    if (status !== 0) {
      return layer.msg(message)
    }
    layer.msg(message)
    layer.close(indexEditForm)
    fn()
  })
})
$('body').on('click', '.btn_delete', function () {
  console.log(11);
  const id = $(this).attr('data-id')
  console.log(id);
  axios.get('/my/article/deletecate/' + id).then(({ data: res }) => {
    if (res.status !== 0) {
      return layer.msg(res.message)
    }
    layer.msg(res.message)
    fn()
  })
})